<template>
  <div class="home">
    <p class="topic">
      话题：习近平举行仪式欢迎法国总统访华并同其会谈
    </p>
    <div>
      <textarea v-if="!isLogin" name="" id="" disabled class="comment-textarea" placeholder="登录后发表态度"></textarea>
      <textarea v-else name="" id="" class="comment-textarea" v-model="comment" placeholder=""></textarea>
      <button @click="postComment">发帖</button>
    </div>
    <span>热门跟帖</span><br />
    <div class="comment-box">
      <div class="comment" v-for="(item, index) in datas" :key="index">
        <div class="top">
          <div class="left">
            网名: {{item.name}}
          </div>
          <div class="right" @click="agree(item.id)">
            {{item.agree}}
          </div>
        </div>
        <div class="center">
          <div>
            {{item.content}}
          </div>
        </div>
        <div class="bottom">
          回复
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'home',
  data() {
    return {
      isLogin: localStorage.getItem('isLogin') === new Date().toLocaleDateString(), // 如果等于，说明今天已经登陆过，如果不等于，那么就是未登录的状态
      datas: [],
      comment: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.$axios.get('/api/list').then(res => {
        if (res.data.code === 1) {
          this.datas = res.data.datas
        } else {
          alert(res.data.msg)
        }
      })
    },
    postComment() { // 发送帖子
      if (this.comment) {
        this.$axios.post('/api/comment', {
          comment: this.comment
        }).then(res => {
          if (res.data.code === 1) {
            this.comment = ''
            this.getData()
          } else {
            alert('失败')
          }
        })
      }
    },
    agree(id) {
      this.$axios.post('/api/agree', {
        id
      }).then(res => {
        if (res.data.code === 1) {
            this.getData()
          } else {
            alert('失败')
          }
      })
    }
  }
}
</script>
<style lang="scss">
  .comment-textarea {
    width: 100%;
  }
  .comment-box{
    .comment {
        padding: 0 16px;
        margin-bottom: 10px;

      .top {
        display: flex;
        justify-content: space-between;
      }
      .center {
        font-size: 16px;
        color: #333;
        margin: 5px 0;
      }
      .bottom {
        text-align: right;
        color: grey;
        font-size: 14px;
      }
    }
  }
</style>